<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Sign Up！</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>-->
	</head>

	<body>
		<form action="" method="post">
			<h1 class="header">注册通行证</h1>
			<table>
				<tr>
					<td class="title">用户名：</td>
					<td class="input">
						<input type="text" name="username" id="username" class="input-detail" onfocus="cls()" />
					</td>
					<td class="prompt">
						<div id="usrJudge" class="hint"></div>
					</td>
				</tr>
				<tr>
					<td class="title">密码：</td>
					<td class="input">
						<input type="password" name="passwd" id="passwd" class="input-detail" onfocus="cls()" />
					</td>
					<td class="prompt">
						<div id="passwdJudge" class="hint"></div>
					</td>
				</tr>
				<tr>
					<td class="title">确认密码：</td>
					<td class="input">
						<input type="password" name="confirm" id="confirm" class="input-detail" onfocus="cls()" />
					</td>
					<td class="prompt">
						<div id="consistenJudge" class="hint"></div>
					</td>
				</tr>
				<tr>
					<td class="title">电话：</td>
					<td class="input">
						<input type="text" name="phoneNum" id="phoneNum" class="input-detail" onfocus="cls()" />
					</td>
					<td class="prompt">
						<div id="numJudge" class="hint"></div>
					</td>
				</tr>
				<tr>
					<td class="title">邮箱：</td>
					<td class="input">
						<input type="email" name="email" id="email" class="input-detail" placeholder="user@example.com" onfocus="cls()" />
					</td>
					<td class="prompt">
						<div id="emailJudge" class="hint"></div>
					</td>
				</tr>
				<tr>
					<td class="title">性别：</td>
					<td class="input">
						<input type="radio" name="sex" id="man" value="" checked="checked" />
						<label for="man">男</label>
						<input type="radio" name="sex" id="woman" value="" />
						<label for="woman">女</label>
					</td>
				</tr>
				<tr>
					<td class="title special">
						<div id="remind"></div>个人说明：</td>
					<td class="input">
						<input name="" id="state" oninput="pre()" />
					</td>
				</tr>
				<tr>
					<td class="title">内容预览：</td>
					<td class="input">
						<input name="" id="preview" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="reset" name="reset" id="reset" value="重置" />
						<input type="submit" name="submit" id="submit" value="注册" />
						<input type="submit" name="joke" id="joke" value="点不到我^_^" />
					</td>
				</tr>
			</table>
		</form>
		<script type="text/javascript">
			//定义表单元素有效性确认标记、提交次数（初值为1）及表单项目合格、警告、错误时的提示符号
			var usrNameSubmit, passwdSubmit, confirmPasswd,
				phoneSubmit, emailSubmit, t = 1,
				ava = "<div class='prompt_ava'><b>√</b></div>",
				war = "<div class='prompt_war'><b>!</b></div>",
				err = "<div class='prompt_err'><b>×</b></div>";
			//定义预览内容函数
			function pre(e) {
				//输出位置及内容
				document.getElementById("preview").value = document.getElementById("state").value;
			}
			//定义用户判断认函数
			var userJudge = document.getElementById("username").onblur = function() {
				//定义用户名
				var name = document.getElementById("username").value;
				//判断用户名长度是否为零，若为零则打印提示信息
				if(name.length == 0) {
					document.getElementById("usrJudge").innerHTML = war + "请输入用户名！";
				} else {
					//定义中文标记及遍历用户名
					for(var i = 0, j = 0; i < name.length; i++) {
						//若用户名中存在中文，则标记发生改变
						if(name.charCodeAt(i) > 255) {
							j++;
						}
					}
					//若用户名中含有中文则打印提示信息
					if(j != 0) {
						document.getElementById("usrJudge").innerHTML = err + "用户名中不能含有中文！";
					}
					//若用户名长度不符合要求，则打印提示信息
					else if(name.length < 6 || name.length > 18) {
						document.getElementById("usrJudge").innerHTML = err + "用户名长度需在6-18个字符！";
					}
					//用户名有效，标记赋值为零
					else {
						document.getElementById("usrJudge").innerHTML = ava + "恭喜你，用户名可用！";
						usrNameSubmit = 0;
					}
				}
			}
			//定义密码判断函数
			var passwdJudge = document.getElementById("passwd").onblur = function() {
				//首先对用户名有效性进行判断
				userJudge();
				//定义密码长度
				var passwd = document.getElementById("passwd").value;
				//判断密码长度是否为零，为零则说明未输入密码，进行警告
				if(passwd.length == 0) {
					document.getElementById("passwdJudge").innerHTML = war + "请输入密码！";
				}
				//若密码长度不符合要求，提示错误
				else if(passwd.length < 8 || passwd.length > 20) {
					document.getElementById("passwdJudge").innerHTML = err + "用户名长度需在8-20个字符！";
				}
				//密码有效，标记赋值为零
				else {
					document.getElementById("passwdJudge").innerHTML = ava + "密码可用！";
					passwdSubmit = 0;
				}
			}
			//定义确认密码判断函数
			var consistenJudge = document.getElementById("confirm").onblur = function() {
				//首先对密码进行判断
				passwdJudge();
				//定义用户两次输入的密码
				var passwd = document.getElementById("passwd").value,
					judge = document.getElementById("confirm").value;
				//若密码处密码长度为零，进行警告
				if(passwd.length == 0) {
					document.getElementById("consistenJudge").innerHTML = war + "请在上面输入密码！";
				}
				//密码确认有效，标记设置为一
				else if(passwd == judge && judge.length > 7 && judge.length < 20) {
					document.getElementById("consistenJudge").innerHTML = ava + "密码正确！";
					confirmPasswd = 0;
				}
				//两次密码不一致，提示错误信息
				else
					document.getElementById("consistenJudge").innerHTML = err + "密码不一致！";
			}
			//定义电话号码判断函数
			var phoneJudge = document.getElementById("phoneNum").onblur = function() {
				//首先对之前内容进行判断
				consistenJudge();
				//定义变量为用户所输入的电话号码
				var phone = document.getElementById("phoneNum").value;
				//若电话号码长度为零，进行警告
				if(phone.length == 0) {
					document.getElementById("numJudge").innerHTML = war + "请输入电话号码！";
				} else {
					//若电话号码不符合规定，提示错误
					for(var i = 2, j = 0; i < phone.length; i++) {
						if(phone.charAt(i) == ".") {
							j++;
						}
					}
					if(phone.length != 11 || phone[0] != 1 || phone[1] == 2 || phone[1] == 6 || j != 0 || phone[1] == 9 || isNaN(Number(phone))) {
						document.getElementById("numJudge").innerHTML = err + "电话号码输入有误！";
					}
					//电话有效，标记设置为一
					else {
						document.getElementById("numJudge").innerHTML = ava;
						phoneSubmit = 0;
					}
				}
			}
			//定义邮箱有效应判断函数
			var emailJudge = document.getElementById("email").onblur = function() {
				//首先对之前内容进行判断
				phoneJudge();
				//定义变量存放用户所输入的邮箱
				var email = document.getElementById("email").value;
				//若邮箱长度为零，进行警告
				if(email.length == 0) {
					document.getElementById("emailJudge").innerHTML = war + "请输入邮箱！";
				} else {
					//遍历用户所输入的邮箱账号，遍历位置从第四个符号开始
					for(var i = 2, j = 0, k = 0; i < email.length - 5; i++) {
						//检查是否含有“@”符号
						if(email.charAt(i) == "@")
							j++;

						//检查是否含有“.”符号
						if(email.charAt(i + 3) == ".")
							k++;
					}
					//遍历邮箱账号并定义中文字符标记
					for(var h = 0, zh_char = 0; h < email.length; h++) {
						//检查是否含有中文字符，如果有，标记改变
						if(email.charCodeAt(h) > 255) {
							zh_char++;
						}
					}
					//如果输入内容中包含中文，提示错误
					if(zh_char != 0) {
						document.getElementById("emailJudge").innerHTML = err + "邮箱中不能含有中文！";
					}
					//若输入邮箱格式不正确，提示错误
					else if(j != 1 || k < 1)
						document.getElementById("emailJudge").innerHTML = err + "邮箱格式有误！";
					//邮箱格式正确，标记设置为零
					else {
						document.getElementById("emailJudge").innerHTML = ava;
						emailSubmit = 0;
					}
				}
			}
			//定义提交有效性判断函数
			var submitJudge = document.getElementById("submit").onclick = function() {
				//对之前内容进行判断
				emailJudge();
				//所有内容都有效，允许提交
				if(confirmPasswd == 0 && passwdSubmit == 0 && usrNameSubmit == 0 && phoneSubmit == 0 && emailSubmit == 0)
					return true;
				else
					//隐藏提交按钮
					var disappear = document.getElementById("submit").style;
				//					disappear.opacity = "0";
				disappear.position = "fixed";
				disappear.top = "100%";
				disappear.left = "100%";
				//定义提交按钮样式及坐标
				var joke = document.getElementById("joke").style,
					x = codnt(),
					y = codnt();
				//更改按钮样式及其坐标
				//				joke.position = "fixed";
				//				joke.opacity = "1";
				joke.top = x;
				joke.left = y;
				//返回false
				return false;
			}
			//坐标生成器
			function codnt() {
				//定义循环初始条件
				var i = -1;
				//若数字超出范围则重新生成
				while(i < 0 || i > 98) {
					//保证随机数范围在0-100
					i = Math.random() * 100;
				}
				//对所生成的数字取整并加“%”
				i = parseInt(i) + '%';
				return i;
			}
			//定义提交按钮被点击时的效果
			var jokeButton = document.getElementById("joke").onclick = function() {
				//对之前内容有效性进行判断
				emailJudge();
				//所有内容均有效，允许提交
				if(confirmPasswd == 0 && passwdSubmit == 0 && usrNameSubmit == 0)
					return true;
				else
					//定义提交按钮样式及坐标
					var joke = document.getElementById("joke").style,
						x = codnt(),
						y = codnt();
				//应用坐标
				joke.top = x;
				joke.left = y;
				//确认按钮已点击次数改变
				t++;
				//如果点击次数超过三次，打印提示信息
				if(t > 3) {
					document.getElementById("preview").style.opacity = "0";
					document.getElementById("remind").innerHTML = "悄悄告诉你，把上面的信息按照要求填了就能点了";
				}
				//不允许提交
				return false;
			}
			//定义清屏函数
			function cls() {
				//清除提交按钮点击次数超过三次后的提示信息
				document.getElementById("remind").innerHTML = "";
				document.getElementById("preview").style.opacity = "1";
			}
		</script>
	</body>

</html>